<template>
  <div>
    <div v-if="isUser" class="bubble-user">
      <div class="warpper">
        <div :class="['bubble', 'user', { 'sendError': error }]">
          <div class="msg">{{ message }}</div>
        </div>
        <div v-if="error" :class="{ 'error-info': error }">
          <a-tag color="error">
            Message sending failed
          </a-tag>
        </div>
      </div>
      <div>
        <a-avatar :size="36" :style="{ backgroundColor: '#006d87', verticalAlign: 'middle' }">
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
      </div>
    </div>
    <div v-else class="bubble-ai">
      <div class="warpper">
        <div>
          <a-avatar :size="36" :style="{ backgroundColor: '#3F51B5', verticalAlign: 'middle', userSelect: 'none' }">
            <template #icon>
              <SmileOutlined style="font-size: 22px;" />
            </template>
          </a-avatar>
        </div>
        <div :class="['bubble', 'ai']">
          <chatMarkdown chatClass="ai-chat" :text="message" :showCodeRowNumber="false"
            @handleHtmlChanged="handleHtmlChanged"></chatMarkdown>
          <!-- <div class="msg">{{ message }}</div> -->
          <!-- <div class="bubble-tool" v-if="chatStore.isEnd">
            <span class="tool-item">
              <a-typography-paragraph :copyable="{ text: htmlText, onCopy: handleCopy }">
                <template #copyableTooltip="{ copied }">
                  <span>{{ copied ? '复制成功' : '复制HTML' }}</span>
                </template>
              </a-typography-paragraph>
            </span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chatMarkdown from '@/components/chatMarkdown.vue'
import { UserOutlined, CopyOutlined, SmileOutlined } from '@ant-design/icons-vue'
import useChatStore from '@/store/chatStore';
export default {
  name: 'Bubble',
  components: {
    UserOutlined,
    CopyOutlined,
    SmileOutlined,
    chatMarkdown
  },
  props: {
    item: Object,
    message: String,
    isUser: {
      type: Boolean,
      default: false
    },
    error: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      htmlText: '',
      chatStore: useChatStore()
    }
  },
  methods: {
    handleHtmlChanged(h) {
      this.htmlText = h
      this.$emit('handleHtmlChanged', h)
    },
    handleCopy(e) {
      // console.log(this.htmlText);
      const html = this.htmlText
      // window.electron.ipcRenderer.invoke('html-to-pdf', { html });
    },
  }
}
</script>

<style lang="less" scoped>
.bubble-tool {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 5px;

  .tool-item {
    cursor: pointer;
  }
}

/deep/.github-markdown-body {
  padding: 0;
  font-size: 14px;

  p {
    // margin: 0;
    word-break: break-word;
  }
}

/deep/.github-theme {
  code {
    padding: 1rem auto !important;
  }

}

@keyframes float {
  0% {
    transform: translateY(80%);
    /* 动画开始时的位置 */
    opacity: 0;
    /* 动画开始时的透明度 */
  }

  100% {
    transform: translateY(0);
    /* 动画结束时的位置 */
    opacity: 1;
    /* 动画结束时的透明度 */
  }
}

.bubble-container {
  display: flex;
}

.bubble-user {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 10px;

  .warpper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: -webkit-fill-available;

    .error-info {
      color: #ff4d4f;
      font-size: 14px;
      // margin-right: 10px;
    }
  }
}

.bubble-ai {
  display: flex;
  align-items: flex-start;
  margin: 8px 1rem;

  .warpper {
    display: flex;
    align-items: flex-start;
    width: -webkit-fill-available;
  }

  &:first-child {
    animation: float 0.5s ease-in-out;
  }
}

.sendError {
  background-color: #ff4d4f !important;
  color: #fff !important;

  &:hover {
    box-shadow: 0 2px 8px rgba(255, 77, 80, 0.5) !important;
  }
}

.bubble {
  display: inline-block;
  background-color: #f2f2f2;
  border-radius: 7px;
  padding: 8px;
  margin: 10px;
  max-width: 70%;
  vertical-align: middle;
  line-height: 1rem;
  height: auto;
  width: auto;
  line-height: 24px;
  transition: all 0.3s;

  .msg {
    height: 100%;
    text-align: left;
    position: relative;
    word-break: break-all;
  }
}

.user {
  background-color: rgb(22, 104, 220);
  color: #f8f8f8;
  text-align: right;
  // margin-left: auto;
  margin-top: 0;
  white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(22, 104, 220, 0.15);

  &:hover {
    // margin-right: 1rem;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(22, 104, 220, 0.5);
  }
}

.ai-chat {
  box-shadow: 0 2px 3px rgba(81, 81, 81, 0.1);
  transition: 0.1s;

  &:hover {
    // margin-left: 1rem;
    transition: 0.25s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.ai {
  background-color: transparent;
  color: #373737;
  text-align: left;
  margin-right: auto;
  margin-top: 0;
  padding: 0;

}
</style>
